<template>
  <div role="radiogroup" class="tab-button-group">
    <label
      v-for="item in props.options"
      role="radio"
      class="tab-button"
      :key="item.value"
      :class="{ 'is-active': radio === item.value }"
    >
      <input
        v-model="radio"
        type="radio"
        autocomplete="off"
        class="tab-button-radio"
        :value="item.value"
        @input="handleInput(item.value)"
      />
      <span class="tab-button__inner">{{ item.label || item.value }}</span>
    </label>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const props: any = defineProps({
  modelValue: [String, Number],
  options: Array
})

const radio = ref<number>(props.modelValue)

const emit = defineEmits(['update:model-value', 'change'])

const handleInput = (i: number) => {
  emit('update:model-value', i)
  emit('change', i)
}

watch(props, (newProps) => {
  radio.value = newProps.modelValue
})
</script>
<style lang="scss" scoped>
.tab-button-group {
  display: flex;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;

  .tab-button {
    position: relative;
    display: inline-block;
    outline: none;
    flex-grow: 1;

    &-radio {
      opacity: 0;
      outline: none;
      position: absolute;
      z-index: -1;
      cursor: pointer;
    }

    &__inner {
      position: relative;
      display: inline-block;
      outline: none;
      line-height: 1;
      white-space: nowrap;
      vertical-align: middle;
      background: #fff;
      border: 1px solid #dcdfe6;
      font-weight: 500;
      border-left: 0;
      color: #606266;
      appearance: none;
      text-align: center;
      box-sizing: border-box;
      margin: 0;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 0;
      width: 100%;
    }
  }
}

.tab-button:not(:first-child) .tab-button__inner::before {
  content: '';
  height: 100%;
  display: block;
  width: 0;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-left: 1px solid transparent;
  position: absolute;
  left: 0;
  top: 0;
}

.tab-button:first-child .tab-button__inner {
  border-left: 1px solid #dcdfe6;
}

.tab-button:hover .tab-button__inner {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

.tab-button:not(:first-child):hover .tab-button__inner::before {
  border-color: #b3d8ff;
}

.tab-button.is-active:hover .tab-button__inner {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.tab-button.is-active:hover .tab-button__inner::before {
  border-color: transparent;
}

.tab-button-radio:checked + .tab-button__inner {
  color: #ffffff;
  background-color: #409eff;
  border-color: #409eff;
  box-shadow: -1px 0 0 0 #409eff;
}
</style>
